{extend name="platform/base" /}
{block name="main"}
<style>
.step_0 {
	text-align: center;
	margin: 100px 0;
}

.reply-div {
	border: 1px solid #d3d3d3;
	width: 360px;
	padding: 15px;
	margin-top: 20px;
}

.cover-div {
	background: #f5f5f5;
	position: relative;
}

.cover-title {
	position: absolute;
	left: 0;
	bottom: 0;
	background: #000;
	color: #fff;
	width: 328px;
	padding: 5px;
	opacity: 0.6;
}

.cover-pic {
	max-width: 360px;
	max-height: 200px;
	margin: auto;
	display: block;
}

.reply-one p, h5 {
	padding: 3px 0;
}

.reply-one p {
	color: #999;
	font-size: 13px;
}

div.reply-more .li {
	border-bottom: 1px solid #d3d3d3;
	padding: 10px 0;
}

div.reply-more .li:after {
	content: '';
	clear: both;
	display: block;
}

div.reply-more .li:last-child {
	border-bottom: 0px solid #d3d3d3;
	padding-bottom: 0;
}

div.reply-more .li:first-child {
	padding-top: 0;
}

.media-div-l {
	width: 230px;
	margin-right: 10px;
	float: left;
}

.media-div-r {
	width: 80px;
	float: right;
}

.media-img {
	max-width: 80px;
	max-height: 200px;
	margin: auto;
	display: block;
}

.media-button {
	border-top: 0px solid #d3d3d3;
	display: table;
}

.media-button a {
	display: inline-block;
	width: 180px;
	text-align: center;
	padding: 10px 0;
}

.media-button a:first-child {
	border-right: 1px solid #d3d3d3;
}
</style>
<section class="panel panel-default">
	<header class="panel-heading font-bold"> 编辑关键字回复 </header>
	<div class="panel-body">
		<form class="form-horizontal">
			<div class="form-group">
				<label class="col-sm-2 control-label">关键词</label>
				<div class="col-md-4">
					<input type="text" class="form-control" id="key" value="{$info['key']}">
				</div>
			</div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">匹配类型</label>
				<div class="col-sm-4">
					<label><input type="radio" name="match_type" id="match_type1" value="1" {eq name="info['match_type']" value="1"}checked{/eq}> 模糊匹配</label>
					<label><input type="radio" name="match_type" id="match_type2" value="2" {eq name="info['match_type']" value="2"}checked{/eq}> 全部匹配</label>
				</div>
			</div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<label class="col-sm-2 control-label">回复内容</label>
				<div class="col-sm-4">
					{empty name="info['madie_info']"}
				<p class="key_data_a" {empty name="info['media_info']"}style="display:block;"{else /}style="display:none;"{/empty}>您还未选择回复内容，<a href="javascript:;" onclick="showMaterial()">立即选择</a></p>
			{/empty}
			<div id="key_data">
			<div class="step_1" {empty name="info['media_info']"}style="display:none;"{else /}style="display:block;"{/empty}>
			{notempty name="info['media_info']"}
							{eq name="info['media_info']['type']" value="1"}
								<div class="reply-div">
									<div class="reply-text">
										<p>{$info['media_info']['title']}</p>
									</div>
								</div>
							{/eq}
							{eq name="info['media_info']['type']" value="2"}
								<div class="reply-div">
									<div class="reply-one">
										<h5>{$info['media_info']['title']}</h5>
										<p>xx月xx日</p>
										<div class="cover-div"><img class="cover-pic" src="__UPLOAD__/{$info['media_info']['item_list'][0]['cover']}"></div>
										<p>{$info['media_info']['item_list'][0]['summary']}</p>
									</div>
								</div>
							{/eq}
							{eq name="info['media_info']['type']" value="3"}
								<div class="reply-div">
									<div class="reply-more">
									{foreach name="info['media_info']['item_list']" item="v" key="k"}
										{eq name="k" value="0"}
											<div class="li">
												<div class="cover-div">
													<img class="cover-pic" src="__UPLOAD__/{$v['cover']}">
													<p class="cover-title">{$v['title']}<p>
												</div>
											</div>
										{/eq}
										{gt name="k" value="0"}
											<div class="li">
												<div class="media-div-l"><p class="media-title">{$v['title']}</p></div>
												<div class="media-div-r"><img class="media-img" src="__UPLOAD__/{$v['cover']}"></div>
											</div>
										{/gt}
									{/foreach}
									</div>
								</div>
							{/eq}
			{/notempty}
			<div class="media-button">
									<a class="btn-primary" style="height:auto;line-height;" href="javascript:;" onclick="showMaterial()">修改</a>
									<a class="btn-danger" style="height:auto;line-height:;" href="javascript:;" onclick="delReply()">删除</a>
								</div>
		</div>
				</div>
			</div>
				</div>
			</div>
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="form-group">
				<div class="col-sm-4 col-sm-offset-2">
					<a href="javascript:void(0);" onclick="addOrUpdateKeyReplay()" class="btn btn-primary">保存</a>
				</div>
			</div>
		</form>
	</div>
</section>
</div>

<input type="hidden" id="id" value="{$id}">
<input type="hidden" id="media_id" value="{$info['reply_media_id']}">
{include file="platform/Wchat/controlWxDialog" /}
<script>
function getMaterial(media_id){
	$.ajax({
		url : "PLATFORM_MAIN/Wchat/getWeixinMediaDetail",
		type : "post",
		async : true,
		data : { "media_id" : media_id },
		success : function(data){
			var html = '';
			if(data){
				html += '<div class="reply-div">';
				if(data['type'] == 1){
					html += '<div class="reply-text">';
					html += '<p>'+data['title']+'</p>';
					html += '</div>';
				}else if(data['type'] == 2){
					html += '<div class="reply-one">';
					html += '<h5>'+data['item_list'][0]['title']+'</h5>';
					html += '<p>xx月xx日</p>';
					html += '<div class="cover-div"><img class="cover-pic" src="'+UPLOAD+'/'+data['item_list'][0]['cover']+'"></div>';
					html += '<p>'+data['item_list'][0]['summary']+'</p>';
					html += '</div>';
				}else if(data['type'] == 3){
					html += '<div class="reply-more">';
					for(var i=0; i < data['item_list'].length; i++){
						if(i < 1){
							html += '<div class="li"><div class="cover-div">';
							html += '<img class="cover-pic" src="'+UPLOAD+'/'+data['item_list'][i]['cover']+'">';
							html += '<p class="cover-title">'+data['item_list'][i]['title']+'<p>';
							html += '</div></div>';
						}else{
							html += '<div class="li">';
							html += '<div class="media-div-l"><p class="media-title">'+data['item_list'][i]['title']+'</p></div>';
							html += '<div class="media-div-r"><img class="media-img" src="'+UPLOAD+'/'+data['item_list'][i]['cover']+'"></div>';
							html += '</div>';
						}
					}
					html += '</ul>';
				}
				html += '</div>';
			}
			$("#media_id").val(media_id);
			$(".key_data_a").hide();
			$("#key_data .step_1").show();
			$("#key_data .step_1 .reply-div").remove();
			$("#key_data .step_1 .media-button").before(html);
		}
	})
}
/**
 * 添加 或 修改 关注时回复
 */
function addOrUpdateKeyReplay(){
	var id = $("#id").val();
	var media_id = $("#media_id").val();
	var key = $("#key").val();
	var match_type = $("input[name='match_type']:checked").val();
	if(media_id > 0){
		$.ajax({
			url : "PLATFORM_MAIN/Wchat/addOrUpdateKeyReplay",
			type : "post",
			async : true,
			data : { "media_id" : media_id, "id" : id, "match_type" : match_type, "key" : key },
			success : function(data){
				if(data['code'] > 0){
					showMessage('success', data['message'], "PLATFORM_MAIN/Wchat/replayconfig?type=2");
				}else{
					showMessage('error', data['message']);
				}
			}
		})
	}else{
		showMessage('error', '请添加回复内容');
	}
}
function delReply(){
	$('#key_data .step_1').hide();
	$('.key_data_a').show();
}
</script>
{/block}